<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部的东西 -->
        <template ref="Forms" :model="formInline">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="formInline.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="formInline.state"
                placeholder="请选择"
                size="small"
              >
                <!-- 循环渲染可选项 -->
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="eliminate">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <!-- 右侧的 -->
            <el-form-item class="offside">
              <el-button type="success" @click="Directory"
                ><i class="el-icon-edit"></i>新增目录</el-button
              >
            </el-form-item>
          </el-form>
        </template>
        <!-- 消息提示 -->
        <template>
          <el-alert
            class="hint"
            :title="`数据一共有${counts}条`"
            type="info"
            show-icon
          >
          </el-alert>
        </template>
        <!-- 表格 -->
        <template>
          <el-table style="width: 100%" :data="list">
            <el-table-column prop="id" label="编号" type="index">
            </el-table-column>
            <el-table-column prop="subjectName" label="所属学科">
            </el-table-column>
            <el-table-column
              prop="directoryName"
              label="学科名称"
            ></el-table-column>
            <el-table-column prop="username" label="创建者"></el-table-column>
            <el-table-column
              prop="addDate"
              label="创建日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="totals"
              label="测试题数量"
              width="100"
            ></el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">已启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="180">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="updatestart(row)">{{
                  judge(row.state)
                }}</el-button>
                <el-button type="text" size="small" @click="amend(row)"
                  >修改</el-button
                >
                <el-button type="text" size="small" @click="del(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(formData.page)"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="Number(formData.pagesize)"
            layout="prev,pager,next, sizes,jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
        <!-- 预览弹窗 -->
        <el-dialog title="新增目录" :visible.sync="directory" width="50%">
          <el-form
            :model="formList"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="所属学科">
              <el-select
                v-model="formList.subjectID"
                placeholder="请选择"
                style="width:100%"
              >
                <template v-if="theirSubject.subjectName!==null">
                  <el-option
                    v-for="item in theirSubject"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.subjectName"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="formList.directoryName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">确定</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, changeState } from '@/api/hmmm/directorys.js'
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'

export default {
  data () {
    return {
      directory: true, // 新增目录弹窗
      counts: 0, // 总数
      status,
      // 添加学科内容
      formList: {
        subjectID: '',
        directoryName: '' // 目录名称
      },
      theirSubject: [], // 学科ID

      rules: {
        directoryName: {
          required: true,
          message: '请输入目录名称',
          trigger: 'blur'
        }
      },

      // 搜索框
      formInline: {
        directoryName: '', // 目录名称
        state: ''
      },
      list: [], // 表格列表
      formData: {
        pagesize: 2, // 每页多少条
        page: 1 // 当前多少页
      }
    }
  },
  created () {
    this.get()
    getCompanys()
    getQuestion()
  },
  methods: {
    // 新增下拉框
    async pulldown () {
      try {
        const res = await list()
        this.theirSubject = res.data.items // 所属学科
        console.log(
          this.theirSubject,
          'this.formList.subjectIDthis.formList.subjectID'
        )
        console.log('筛选筛选筛选筛选筛选筛选筛选', res)
        // 保存数据
      } catch (err) {
        console.log('list', err)
      }
    },

    // 新增目录
    Directory () {
      this.directory = true
      this.pulldown()
      console.log(this.formList.subjectID)
    },
    // 调用搜索
    search () {
      this.bolting(this.formInline)
      console.log(this.formInline)
    },
    // 筛选请求
    async bolting (data) {
      try {
        const res = await list(data)
        console.log('list', res)
        res.data.items.forEach(item => {
          item.createTime = this.$dayjs(item.createTime).format(
            'YYYY-MM-DD hh:mm:ss'
          )
        })
        // 遍历数组，然后格式化时间
        this.list = res.data.items
        // 保存数据
      } catch (err) {
        console.log('list', err)
      }
    },
    // 清除
    eliminate () {
      this.formInline = {
        directoryName: '',
        state: ''
      }
    },
    // 启用禁用
    updatestart (data) {
      this.$confirm('此操作将切换文件状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (data.state === 1) {
            data.state = 0
          } else {
            data.state = 1
          }
          const res = await changeState(data)
          console.log(res, 'changeStatechangeState')
          console.log(data)
          this.tbody()
          this.$message({
            type: 'success',
            message: '切换状态成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 枚举
    judge (val) {
      if (val === 1) {
        return '禁用'
      } else if (val === 0) {
        return '启用'
      }
    },
    // 获取列表请求
    async get () {
      try {
        const res = await list(this.formData)
        console.log('list', res)
        res.data.items.forEach(item => {
          item.addDate = this.$dayjs(item.addDate).format(
            'YYYY-MM-DD hh:mm:ss'
          )
        })

        this.list = res.data.items
        this.counts = res.data.counts
        // 保存数据
      } catch (err) {
        console.log('list', err)
      }
    },

    // 分页的
    handleSizeChange (val) {
      this.formData.pagesize = val
      this.formData.page = 1
      this.get()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.formData.page = val
      this.get()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped></style>
